<template>
  <div class="my-focus">
    <h2>关注列表</h2>
    <div class="focus-list">
      <div v-for="user in followees" :key="user.user_id" class="user-item">
        <img :src="'http://localhost:8080/images/upload/' + user.profile_picture" alt="头像" class="avatar" />
        <div class="user-info">
          <h3 class="user-name">{{ user.user_name }}</h3>
          <p class="user-gender">{{ user.user_sex }}</p>
        </div>
        <div class="user-actions">
          <el-button @click="toggleFollow(user.user_id)">{{ user.is_followed ? '取消关注' : '关注' }}</el-button>
          <el-button @click="goToPrivateMessage(user.user_id)">私信</el-button>
          <el-button @click="goToHisHome(user.user_id)">个人主页</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      user_id: this.$route.params.user_id, // 使用路由参数
      followees: [],
    };
  },
  mounted() {
    this.user_id = this.$route.params.user_id || sessionStorage.getItem('user_id') || localStorage.getItem('user_id');
    if (!this.user_id) {
      ElMessage.error("无法获取用户ID，请重新登录或联系管理员");
      return;
    }
    this.getFollowees();
  },
  methods: {
    async getFollowees() {
        try {
          const response = await axios.get(`http://localhost:8080/user/${this.user_id}/followees`); 
          this.followees = response.data.map(user => ({
            ...user,
            is_followed: true, 
          }));
        } catch (error) {
          console.error("获取关注列表失败", error);
          ElMessage.error("获取关注列表失败");
        }
    },
    async toggleFollow(userId) {
      if (!userId) {
        ElMessage.error("用户ID未定义，无法执行取消关注操作");
        return;
      }
      try {
        const fanId = this.user_id; // 当前用户ID
        const felloweeId = userId; // 被关注用户的ID
        const response = await axios.post(`http://localhost:8080/user/${fanId}/unfollow/${felloweeId}`);
        if (response.data === "Successfully unfollowed!") {
          ElMessage.success(response.data);
          const index = this.followees.findIndex(u => u.user_id === userId);
          if (index !== -1) {
            this.followees[index].is_followed = false;
          }
        } else {
          ElMessage.error(response.data || "取消关注失败");
        }
      } catch (error) {
        console.error("操作失败", error);
        ElMessage.error("操作失败：" + (error.response ? error.response.data : error.message));
      }
    },
    goToPrivateMessage(userId) {
      this.$router.push({ name: 'PrivateMessage', params: { user_id: this.user_id, targetUser_id: userId } });
    },
    goToHisHome(userId) {
      this.$router.push(`/HisHome/${userId}`);
    },
  },
};
</script>

<style scoped>
.my-focus {
  font-family: 'KaiTi', serif;
  background: linear-gradient(to right, #f9f4e8, #e8dfca);
  color: #4b3f33;
  padding: 20px;
  align-items: center;
}

.focus-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center; /* 居中对齐 */
  align-items: flex-start;
  max-width: 2000px; /* 设置最大宽度，防止太宽 */
}

.user-item {
  border: 1px solid #d6c8b0;
  border-radius: 15px;
  padding: 10px;
  width: calc(25% - 20px);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #d6c8b0;
  margin-bottom: 10px;
}

.user-info {
  text-align: center;
}

.user-name {
  font-weight: bold;
  color: #4b3f33;
}

.user-gender {
  font-size: 14px;
  color: #7d5c3c;
}

.user-actions {
  margin-top: 10px;
}
</style>